<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="libs/js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs/js/base.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="libs/css/goodsList.css"/>
	</head>
	<body>
		<div id="head">
			
		</div>
		<div id="content">
			<div id="contentLeft">
				<p>所有男装</p>
					<div class="itemList">
						<ul class="detail">
							<li>柯尼塞格</li>
							<li>法拉利</li>
							<li>兰博基尼</li>
							<li>迈凯伦</li>
							<li>劳斯莱斯</li>
							<li>宾利</li>
							<li>迈巴赫</li>
							<li>红旗</li>
							<li>宝马</li>
							<li>保时捷</li>
							<li>奔驰</li>
						</ul>
					</div>
				<p>宝箱</p>
				<div class="itemList">
					<ul class="detail">
						<li>柯尼塞格</li>
						<li>法拉利</li>
						<li>兰博基尼</li>
						<li>迈凯伦</li>
						<li>劳斯莱斯</li>
						<li>宾利</li>
						<li>迈巴赫</li>
						<li>红旗</li>
						<li>宝马</li>
						<li>保时捷</li>
						<li>奔驰</li>
					</ul>
				</div>
				<p>配饰</p>
				<div class="itemList">
					<ul class="detail">
						<li>柯尼塞格</li>
						<li>法拉利</li>
						<li>兰博基尼</li>
						<li>迈凯伦</li>
						<li>劳斯莱斯</li>
						<li>宾利</li>
						<li>迈巴赫</li>
						<li>红旗</li>
						<li>宝马</li>
						<li>保时捷</li>
						<li>奔驰</li>
					</ul>
				</div>
				<p>服饰</p>
				<div class="itemList">
					<ul class="detail">
						<li>柯尼塞格</li>
						<li>法拉利</li>
						<li>兰博基尼</li>
						<li>迈凯伦</li>
						<li>劳斯莱斯</li>
						<li>宾利</li>
						<li>迈巴赫</li>
						<li>红旗</li>
						<li>宝马</li>
						<li>保时捷</li>
						<li>奔驰</li>
					</ul>
				</div>
				<p>品牌</p>
				<div class="itemList">
					<ul class="detail">
						<li>柯尼塞格</li>
						<li>法拉利</li>
						<li>兰博基尼</li>
						<li>迈凯伦</li>
						<li>劳斯莱斯</li>
						<li>宾利</li>
						<li>迈巴赫</li>
						<li>红旗</li>
						<li>宝马</li>
						<li>保时捷</li>
						<li>奔驰</li>
					</ul>
				</div>
				<p>颜色</p>
				<div class="itemList">
					<ul class="detail">
						<li>柯尼塞格</li>
						<li>法拉利</li>
						<li>兰博基尼</li>
						<li>迈凯伦</li>
						<li>劳斯莱斯</li>
						<li>宾利</li>
						<li>迈巴赫</li>
						<li>红旗</li>
						<li>宝马</li>
						<li>保时捷</li>
						<li>奔驰</li>
					</ul>
				</div>
				<p>鞋子</p>
				<div class="itemList">
					<ul class="detail">
						<li>柯尼塞格</li>
						<li>法拉利</li>
						<li>兰博基尼</li>
						<li>迈凯伦</li>
						<li>劳斯莱斯</li>
						<li>宾利</li>
						<li>迈巴赫</li>
						<li>红旗</li>
						<li>宝马</li>
						<li>保时捷</li>
						<li>奔驰</li>
					</ul>
				</div>
				<p>腕表</p>
				<div class="itemList">
					<ul class="detail">
						<li>柯尼塞格</li>
						<li>法拉利</li>
						<li>兰博基尼</li>
						<li>迈凯伦</li>
						<li>劳斯莱斯</li>
						<li>宾利</li>
						<li>迈巴赫</li>
						<li>红旗</li>
						<li>宝马</li>
						<li>保时捷</li>
						<li>奔驰</li>
					</ul>
				</div>
				<p>汽车</p>
				<div class="itemList">
					<ul class="detail">
						<li>柯尼塞格</li>
						<li>法拉利</li>
						<li>兰博基尼</li>
						<li>迈凯伦</li>
						<li>劳斯莱斯</li>
						<li>宾利</li>
						<li>迈巴赫</li>
						<li>红旗</li>
						<li>宝马</li>
						<li>保时捷</li>
						<li>奔驰</li>
					</ul>
				</div>
			</div>
			<div id="contentRight">
				<div id="guide">
					<ul id="ul12">
						<li>商品排序:</li>
						<li>热门</li>
						<li>新品</li>
						<li>价格由高到低</li>
						<li>价格由低到高</li>
					</ul>
					<div id="btn_bar">
						<button id="lastPage"><</button>
					</div>
				</div>
				<div id="goods_Display">
				</div>
			</div>
		</div>
		<div id="pageFoot">
			<p>美西奢侈品>男士奢侈品</p>
		</div>
		<div id="back">
			<ul id="son_ba">
				<li><img src="libs/img/music.jpg"/></li>
				<li><img src="libs/img/tencen.jpg"/></li>
				<li><img src="libs/img/top.jpg"/></li>
			</ul>
		</div>
		<div id="foot">
			
		</div>
		<script type="text/javascript">
			$('#head').load('reHead.html?_='+Math.random());
			$('#foot').load('footer1.html?_='+ Math.random());
			var index =0
			$('p').click(function(){
				var num =parseInt( $(this).index()/2 );
				if(index == 0 ){
					index = 1;
					$(this).css('background','url(libs/img/hide.jpg) no-repeat right');
					$('.itemList').eq(num).show();
				}else{
					$('.itemList').eq(num).hide();
					index = 0;
					$(this).css('background','url(libs/img/show.jpg) no-repeat right');
				}
			});
			$('p').mouseover(function(){
				$(this).css('color','#8E0C3A');
				$(this).mouseout(function(){
					$(this).css('color','#444');
				});
			});
			//点击下一页进行翻页
			$.ajax({
					type:"get",
					url:"libs/data/goodData0.json",
					async:true,
					success:function(request){
						var len =Math.ceil( (request.data.length)/24 );
						//通过取得的数据添加按钮
						for(var i=0; i<len; i++){
							var _html = "<button class='changBtn'>";
							_html += (i+1) + "</button>";
							$('#btn_bar').append(_html);
						}
						$('#btn_bar').append("<button id='nextPage'>></button>");
						//加载按钮
						for(var i=0; i<24; i++){
							var _html = "<dl class='dl0'><dt>";
							_html += "<img src = 'libs/img/" + request.data[i].img + "'></dt>";
							_html += "<dd>" + request.data[i].brand + request.data[i].name + "</dd>";
							_html += "<dd>" + request.data[i].govPrice + "</dd>";
							_html += "<dd>" + request.data[i].price + "</dd>";
							_html +="<button class='buy'>查看详情</button>" +"</dl>";
							$('.buy').css({"position":"absolute","width":"70px","height":"15px","text-align":"center","background":"#8E0C3a","color":"#EEE"});
							$('#goods_Display').append(_html);
						}
						//createNode(request);
						$('#guide button').css({'background':'#cccccc','margin-left':'10px','width':'20px','height':'14px','text-align':'center','ling-height':'14px','margin-top':'10px'});
						//移动到上面变色
						$('#guide button').mouseover(function(){
							$(this).css({'color':'#8E0C3A'});
							$(this).mouseout(function(){
								$(this).css({'color':'black'});
							});
						});
						
						var n;//全局变量用于下面的上下翻页
						$('.changBtn').click(function(){
							//加载先清除
							$('#goods_Display').empty();
							//要知道点击的是哪个按钮
							n = $(this).text();
							createNode(n);
						});
						
						//拼接创建节点
						function createNode(index){
							index = parseInt(index);
							//确定加载的范围
							var a = (index-1)*24;
							var b = a+24;
							for(var i = a; i<b;i++){
								var _html = "<dl class='dl0'><dt>";
								_html += "<img src = 'libs/img/" + request.data[i].img + "'></dt>";
								_html += "<dd>" + request.data[i].brand + request.data[i].name + "</dd>";
								_html += "<dd>" + request.data[i].govPrice + "</dd>";
								_html += "<dd>$" + request.data[i].price + "</dd>";
								_html +="<button class='buy'>查看详情</button>" +"</dl>";
								$('.buy').css({"position":"absolute","width":"70px","height":"15px","text-align":"center","background":"#8E0C3a","color":"#EEE"});
								$('#goods_Display').append(_html);
							}
						}
						//上一页
						$('#lastPage').click(function(){
							$('#goods_Display').empty();
							n = parseInt(n);
							console.log(n);
							//确定加载的范围
							if( n>1 ){
								n--;
							}else{
								n=1;
							}
							createNode(n);
						});
						//下一页
						$('#nextPage').click(function(){
							$('#goods_Display').empty();
							n = parseInt(n);
							console.log(n);
							//确定加载的范围
							if( n<4 ){
								n++;
							}else{
								n=4;
							}
							createNode(n);
						});
						//点击查看详情,连接到详情页
						$('.buy').click(function(){
							//window.location.href = "detaile0.html";
							var index = $(this).closest('dl').index();
							var img = request.data[index].img;
							var name = $(this).parent().find('dd:first').text();
							var govPrice = $(this).parent().find('dd:first').next().text();
							var price = $(this).parent().find('dd:last').text();
							
							var cloths = {"img":img,"name":name,"govPrice":govPrice,"price":price};
							var json = JSON.stringify(cloths);
							setCookie("shopInfo",json);
							window.location.href = "detaile.html";
						});
					},
			});
			
			//返回顶部
			$('#son_ba li').mouseover(function(){
				$(this).css('opacity',1);
				$(this).mouseout(function(){
					$(this).css('opacity',0.8);
				});
			});
			$('#son_ba:last').click(function(e){
				$(document).scrollTop(0);
			});
			
			
			
		</script>
	</body>
</html>
